<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
		<title>固定表格</title>
		<link type="text/css" rel="stylesheet" href="css/demo.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/fixedTable.js"></script>
		<script type="text/javascript">
			$(function(){
				/*同时固定表头和列*/
				new FixedTable({
					id:"fixedAll",
					fixedLeftColumn:2,
					fixedThead:true,
					tbodyHeight:'240px'
				});
				/*只固定列*/
				new FixedTable({
					id:"fixedColumn",
					fixedLeftColumn:2
				});
				/*只固定表头*/
				new FixedTable({
					id:"fixedThead",
					fixedLeft:false,
					fixedThead:true,
					tbodyHeight:'240px'
				});
			});
		</script>
	</head>
	<body>
		<div class="outer-div">
			<h3>同时固定表头和列</h3>
			<table id="fixedAll">
				<thead>
					<tr>
						<th>姓名</th>
						<th>一月</th>
						<th>二月</th>
						<th>三月</th>
						<th>四月</th>
						<th>五月</th>
						<th>六月</th>
						<th>七月</th>
						<th>八月</th>
						<th>九月</th>
						<th>十月</th>
						<th>十一月</th>
						<th>十二月</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>小米</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>华为</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>魅族</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>oppo</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>vivo</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>联想</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="outer-div">
			<h3>只固定列</h3>
			<table id="fixedColumn">
				<thead>
					<tr>
						<th>姓名</th>
						<th>一月</th>
						<th>二月</th>
						<th>三月</th>
						<th>四月</th>
						<th>五月</th>
						<th>六月</th>
						<th>七月</th>
						<th>八月</th>
						<th>九月</th>
						<th>十月</th>
						<th>十一月</th>
						<th>十二月</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>小米</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>华为</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>魅族</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>oppo</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>vivo</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>联想</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="outer-div">
			<h3>只固定表头</h3>
			<table id="fixedThead">
				<thead>
					<tr>
						<th>姓名</th>
						<th>一月</th>
						<th>二月</th>
						<th>三月</th>
						<th>四月</th>
						<th>五月</th>
						<th>六月</th>
						<th>七月</th>
						<th>八月</th>
						<th>九月</th>
						<th>十月</th>
						<th>十一月</th>
						<th>十二月</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>小米</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>华为</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>魅族</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>oppo</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>vivo</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
					<tr>
						<td>联想</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
						<td>1000万</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
